<template>
  <ROperator
    :operators="['drag', 'setting']"
    :style="{ paddingBottom: '' }"
    @setting="isSettingShow = !isSettingShow"
  >
    <r-title icon="customize" :isShow="isTitleShow" v-model="title" />
    <r-input v-model="dataList.content" hint="添加自定义描述..." />
    <!--设置-->
    <r-setting
      v-model="settingList.switchLs"
      v-show="isSettingShow"
      @mouseleave="isSettingShow = !isSettingShow"
    />
  </ROperator>
</template>

<script>
import RTitle from "@/components/base/RTitle";
import RInput from "@/components/base/RInput";
import ROperator from "@/components/base/ROperator";
import RSetting from "@/components/base/RSetting";
import useData from "../useData";
import { ref } from "vue";

export default {
  name: "customize",
  components: { RTitle, RInput, ROperator, RSetting },
  props: {
    id: [String, Number],
  },
  setup(props) {
    const baseData = useData(props.id);
    const isSettingShow = ref(false);
    return {
      ...baseData,
      isSettingShow,
    };
  },
};
</script>

<style scoped></style>
